<script setup>
import { ref, onMounted, watch } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
import sHead from '@/components/common/head.vue'
const isShow = ref(false)
const route = useRoute();
let navName = "";

import head from '@/assets/icon/bendiziyuan.svg'
const nav_list = ref([
    {
        name: '动物资源',
        id: 'dh001',
        icon: "icon iconfont icon-a-Property1xuanzhong1",
        path: '/animals',
        isgroup: false,
        isdeep: false,
        childern: []
    },
    {
        name: '植物资源',
        id: 'dh002',
        icon: "icon iconfont icon-a-Property1xuanzhong-11",
        path: '/plants',
        isgroup: false,
        isdeep: false,
        childern: []
    },
    {
        name: '真菌资源',
        id: 'dh004',
        icon: "icon iconfont icon-zhenjun",
        path: '/funguss',
        isgroup: false,
        isdeep: false,
        childern: []
    },
    {
        name: '古树名木',
        id: 'dh003',
        icon: "icon iconfont icon-a-Property1xuanzhong-21",
        path: '/otwss',
        isgroup: false,
        isdeep: false,
        childern: []
    },
    {
        name: '自然资源',
        id: 'dh004',
        icon: "icon iconfont icon-Vector",
        path: '/naturalresourcess',
        isgroup: false,
        isdeep: false,
        childern: []
    },
    {
        name: '专家鉴定',
        id: 'dh005',
        icon: "icon iconfont icon-zhuanjiajianding1",
        path: '/appraises',
        isgroup: false,
        isdeep: false,
        childern: []
    },
    {
        name: '数据上传',
        id: 'dh012',
        icon: "icon iconfont icon-shebeiguanli",
        path: '/dataUpload',
        isgroup: false,
        isdeep: false,
        childern: []
    },
    {
        name: '统计分析',
        id: 'dh006',
        icon: "icon iconfont icon-tongjifenxi",
        path: '/statisticalCharts',
        isgroup: false,
        isdeep: false,
        childern: []
    },
    {
        name: '调查历史',
        id: 'nav007',
        icon: 'icon iconfont  icon-a-Property1xuanzhong-1',
        isgroup: true,
        childern: [
            {
                name: '样点调查',
                id: 'hs001',
                icon: "icon iconfont icon-tongjifenxi",
                path: '/history/animal'
            },
            // {
            //     name: '植物调查',
            //     id: 'hs002',
            //     icon: "icon iconfont icon-tongjifenxi",
            //     path: '/history/plant'
            // },
            // {
            //     name: '真菌调查',
            //     id: 'hs003',
            //     icon: "icon iconfont icon-tongjifenxi",
            //     path: '/history/fungus'
            // },
            // {
            //     name: '古树名木调查',
            //     id: 'hs004',
            //     icon: "icon iconfont icon-tongjifenxi",
            //     path: '/history/otws'
            // },
            // {
            //     name: '自然调查',
            //     id: 'hs005',
            //     icon: "icon iconfont icon-tongjifenxi",
            //     path: '/history/nature'
            // },
            {
                name: '样方调查',
                id: 'hs006',
                icon: "icon iconfont icon-tongjifenxi",
                path: '/history/quadratSurvey'
            },
        ]
    }
])

const curnav = () => {
    isShow.value = !isShow.value;
}

const filpath = (data) => {
    nav_list.value.forEach(e => {
        if (e.isgroup) {
            e.childern.forEach(c => {
                let path = c.path.split('/')[2];
                if (data == path) {
                    c.isdeep = true
                } else {
                    c.isdeep = false
                }
            })
        } else {
            let path = e.path.split('/')[e.path.split('/').length - 1];
            if (data == path) {
                e.isdeep = true
            } else {
                e.isdeep = false
            }
        }
    })
}

watch(() => route.path, newRoute => {
    let path = newRoute.split('/')[1];
    if (path == 'history') {
        filpath(newRoute.split('/')[2]);
    } else {
        filpath(path);
    }

})

onMounted(() => {
    let path = window.location.pathname.split('/');
    if (path.indexOf('history') != -1) {
        isShow.value = true
    } else {
        isShow.value = false
    }
})

</script>
<template>
    <div class="left-nav">
        <div class="ln-head">
            <img :src="head" alt="">
            <span>本底资源库</span>
        </div>
        <div class="ln-list" v-for="i in nav_list" :key="i.id">
            <div class="ln-box" v-if="i.isgroup">
                <div class="ln-title" :class="isShow ? 'lta' : 'lt'" @click.stop="curnav(i)">
                    <i :class="i.icon"></i>
                    <div><span>{{ i.name }}</span></div>
                    <i :class="isShow ? 'icon iconfont icon-xiala-1' : 'icon iconfont icon-xiala'"></i>
                </div>
                <div class="ln-nav-b" v-show="isShow">
                    <router-link class="ln-nav" :class="k.isdeep ? 'my-active' : ''" v-for="k in i.childern" :key="k.id"
                        :to="{ path: k.path }">
                        <i style="opacity: 0;" class="icon iconfont icon-tongjifenxi"></i>
                        <div><span>{{ k.name }}</span></div>
                    </router-link>
                </div>
            </div>
            <div class="ln-box" v-else>
                <router-link class="ln-nav" :class="i.isdeep ? 'my-active' : ''" :to="{ path: i.path }">
                    <i :class="i.icon"></i>
                    <div><span>{{ i.name }}</span></div>
                </router-link>
            </div>
        </div>


        <s-head />

    </div>
</template>

<style scoped>
.left-nav {
    width: 160px;
    height: 100%;
    user-select: none;
    color: #fff;
    border-right: 1px solid var(--light-border-el-border-color, #DCDFE6);
    background: #071D49;
    position: relative;
}

.ln-head {
    width: 100%;
    height: 123px;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ln-head img {
    width: 50px;
    height: 50px;
    margin-bottom: 8px;
}

.ln-list {
    width: 100%;
    cursor: pointer;
    overflow: hidden;
}

.ln-box {
    overflow: hidden;
}

.ln-title {
    width: 100%;
    height: 50px;
    padding: 0 16px 0 10px;
    display: flex;
    align-items: center;
}


.lt {
    color: #9FB8E9;
}

.lta {
    color: #fff;
}

.ln-title i {
    font-size: 16px;
}

.ln-title div {
    width: 105px;
    margin-left: 8px;
}

.ln-nav-b {
    width: 100%;
    overflow: hidden;
}

.ln-nav {
    width: 100%;
    height: 50px;
    padding-left: 10px;
    display: flex;
    align-items: center;
}

.ln-nav div {
    width: 105px;
    margin-left: 8px;
}
</style>
<style>
.my-active {
    color: #fff !important;
    border-right: 3px solid #387BFF;
    background: rgba(56, 123, 255, 0.30);
}
</style>